<template>
  <van-nav-bar :title="title">
    <template #left>
      <div>
        <i :class="icon"></i>
        {{left}}
      </div>
    </template>
    <template #title>
      <div>
        {{title}}
      </div>
    </template>
    <template #right>
      <van-icon name="wap-nav"
                size="26"
                color="#fff"
                @click="isShow=!isShow" />
      <ul v-show="isShow"
          class="van-nav-bar_menu">
        <li @click="gotoPage">首页</li>
        <li @click="gotoBang">榜单</li>
        <li @click="gotoHot">热点</li>
        <li @click="gotoMall">商城</li>
      </ul>
    </template>
  </van-nav-bar>
</template>
<script>
export default {
  props: {
    title: String,
    left: String,
    icon: String
  },
  created () {
    console.log(this.title)
  },
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    gotoBang () {
      // console.log('123456')
      this.$router.push('/board')
    },
    gotoHot () {
      // console.log('123456')
      this.$router.push('/hot')
    },
    gotoMall () {
      this.$router.push('/mall')
    },
    gotoPage () {
      this.$router.push('/home')
    }
  }
}
</script>
<style lang="scss" scope>
.van-nav-bar {
  background: #e54847;
  height: 46px;
  line-height: 46px;
  position: relative;
  .van-nav-bar__left {
    color: #fff;
    font-size: 16px;
  }
  .van-nav-bar__title {
    color: #fff;
    font-size: 18px;
  }
  .van-nav-bar__right {
    padding: 0 8.5px;
  }
  .van-nav-bar_menu {
    position: absolute;
    right: 8.4px;
    top: 50px;
    background-color: #fff;
    z-index: 2;
    li {
      width: 110px;
      height: 45px;
      border-bottom: 1px solid #f0f0f0;
    }
    li:last-of-type {
      border: none;
    }
  }
}
</style>
